<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ngAnimate插件2</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
    <script src="../../lib/angularjs/angular-route.min.js"></script>
    <style type="text/css">
    .box{transition:1s all;position:absolute;}
    /*显示操作*/
    .box.ng-enter{opacity:0;}
    .box.ng-enter-active{opacity:1;}
    /*隐藏操作*/
    .box.ng-leave{opacity:1;}
    .box.ng-leave-active{opacity:0;}
</style>
</head>
<body>
<div ng-controller="Aaa">
    <a href="javascript:void(0);" ng-click="$location.path('aaa')">首页</a>
    <a href="javascript:void(0);" ng-click="$location.path('bbb')">内容</a>
    <a href="javascript:void(0);" ng-click="$location.path('ccc')">标题</a>
    <div class="box" ng-view id="zhttTest"></div>
</div>
<script type="text/javascript">
    var m1 = angular.module('myApp',['ngRoute','ngAnimate']);
    m1.config(['$routeProvider',function($routeProvider){
        $routeProvider.when('/aaa',{
            template : '<h1>AAA</h1>{{name}}',
            controller : 'Aaa'
        }).when('/bbb',{
            template : '<h1>BBB</h1>{{name}}',
            controller : 'Bbb'
        }).when('/ccc',{
            template : '<h1>CCC</h1>{{name}}',
            controller : 'Ccc'
        }).otherwise({
            redirectTo : '/aaa'
        });
    }]);
    m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
        $scope.name = 'xiecg-Aaa';
        $scope.$location = $location;
    }]);
    m1.controller('Bbb',['$scope',function($scope){
        $scope.name = 'xiecg-Bbb';
    }]);
    m1.controller('Ccc',['$scope',function($scope){
        $scope.name = 'xiecg-Ccc';
    }]);
</script>
</body>
</html>